import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json';
// 哈希模式
// import {hashRouter as Router,Link,Route} from 'react-router-dom';
// history模式
import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom';
// 导入redux组件
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>111</span></span></h1>
// console.log(mockData)

// React-redux组件学习:

// 安装：
// cnpm install react-redux --save

// 概念：
// Provider组件：自动和store里的state和组件进行关联
// MapStatetoProps:这个函数用于将store中state映射到组件里的props里
// mapdispatchToProps:将store里的dispatch方法映射到组件的props里，实现方法共享
// connect:将组件和数据（方法进行连接）


// 1.初始化数据
const reducer = function (state={num:0},action) { 
  switch (action.type) {
    case 'add':
      state.num++;
      break;
    case 'decrement':
        state.num--;
        break;
    default:
      break;
  }
  return {...state}
 };
 let store = createStore(reducer);
// 2.数据的获取和修改（要将state映射到组件的props中，将修改数据的方法页映射到props中）
// 将state映射到props到函数
function mapStateToProps(state) { 
  return {
    value:state.num
  }
 };
// 将修改数据到方法映射到props中，默认会传入store中到dispatch 方法
function mapdispatchToProps(dispatch) { 
  return {
    onAddClick:(addAction)=>{dispatch(addAction)}
  }
 }

 // 定义组件
class Counter extends React.Component{
  constructor(props){
    super(props);
  };
  render(){
    // 计数，通过映射传入组件到props到方法和状态
    let value = this.props.value;
    let onAddClick = this.props.onAddClick;
    console.log(value ,onAddClick)
    //等同于vue中到马屁mapmutation和mapState
    return (
      <div>
        <h5>计数：{value}</h5>
        <button onClick={function(){onAddClick({type:'add'})}}>+1</button>
        <button onClick={()=>{onAddClick({type:'decrement'})}}>-1</button>
      </div>
    )
  }
}

//  将数据和组件关联
const App1 = connect(
  mapStateToProps,
  mapdispatchToProps
)(Counter);

//关联和渲染
 ReactDOM.render(
   <Provider store={store}>
       <App1></App1>
   </Provider>
,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
